<template>
  <div class="index_todo item_cell item_bg" :style="style">
    <div class="item_header" :class="props.moveClass">
      <div class="titleLeft1" :style="style">
        审核游戏列表
        <ExclamationCircleOutlined />
      </div>
      <div class="titleRight1" :style="style" @click="historicalAudit">
        历史审核记录
        <RightOutlined style="line-height: 24px" />
      </div>
    </div>
    <div class="todo_group">
      <div class="todo_item todo_item_create">
        <div class="box" @click="doAction('add')">
          <div class="todo_item_create_box">
            <PlusOutlined style="font-size: 32px; color: rgb(49, 188, 99)" />
          </div>
          <div class="box_title">添加游戏</div>
        </div>
      </div>
      <div
        v-for="(item, index) in todoList"
        :key="index"
        class="todo_item"
        :style="style"
      >
        <div class="todo_cont">
          <div class="todo_icon">
            <!-- <img src="../../assets/images/user_icon.png" alt="" class="imgs" /> -->
            <img :src="item.img" class="imgs" />
            <!-- <img :src="getAssetsImages(item.img)" class="imgs" /> -->
            <div class="title">{{ item.title }}</div>
            <a-tag v-if="item.colors === 'success'" :bordered="false" color="success"
              >审核成功</a-tag
            >
            <a-tag v-else-if="item.colors === 'error'" :bordered="false" color="error"
              >审核失败</a-tag
            >
            <a-tag v-else-if="item.colors === 'warning'" :bordered="false" color="warning"
              >审核中</a-tag
            >
            <a-tag v-else-if="item.colors === 'default'" :bordered="false">未上线</a-tag>
          </div>
        </div>
        <div class="createTime">创建时间:{{ item.times }}</div>
        <div class="Latest_News">最新动态:</div>
        <div class="steps_content">
          <div class="steps" style="width: 80px; font-size: 12px">
            {{ item.times }}
          </div>
          <div style="flex: 1">
            <a-steps
              class=""
              v-model:current="current"
              status="error"
              direction="vertical"
              size="small"
              progress-dot
              :current="1"
              :items="[
                { title: '上传文件配置' },
                {
                  title: '审核失败',
                  description,
                },
              ]"
            >
            </a-steps>
            <a-button
              size="small"
              class="editButton"
              type="primary"
              @click="todoList_edit"
              >编辑修改</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, createVNode } from "vue";
import {
  ExclamationCircleOutlined,
  RightOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
// import { getTodoNumber } from '@/api/views/home/dashboard';
import { useLayoutThemeStore } from "@/store/layout/layoutTheme.js";
const layoutThemeStore = useLayoutThemeStore();
const titleColor = computed(() => layoutThemeStore.titleColor);
const style = computed(() => {
  return {
    // paddingLeft: '10px',
    // height: `var(--app-header-height)`,
    color: titleColor.value,
  };
});
const props = defineProps({
  option: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: () => "",
  },
  moveClass: {
    type: String,
    default: () => "",
  },
});
const todoList = ref([
  {
    key: "total",
    img: "https://ali-img.100520.com/images/202447/d659f861b95a5c0c1650b262b4c0a6bb_1id6snchu.png",
    colors: "success",
    title: "游戏名称1",
    times: "2024/04/11 15:3:00",
  },
  {
    key: "todo",
    img: "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    colors: "error",
    title: "游戏名称2",
    times: "2024/04/11 15:3:00",
  },
  {
    key: "reject",
    img: "https://ali-img.100520.com/images/202447/d659f861b95a5c0c1650b262b4c0a6bb_1id6snchu.png",
    colors: "warning",
    title: "游戏名称3",
    times: "2024/04/11 15:3:00",
  },
  // { key: 'approved', img: 'user_icon.png',colors:"default", title: '游戏名称11111133666633333311114',times:'2024/04/11 15:3:00' },
  // { key: 'approved', img: 'user_icon.png',colors:"default", title: '游戏名称11111133666633333311114',times:'2024/04/11 15:3:00' },
]);
const numberList = ref({});
// let getAssetsImages = (data) => {
//   return new URL(`../../assets/user_icon.png/${data}`, import.meta.url).href;
//   return new URL(`../../assets/user_icon.png`, import.meta.url).href;
// };
// const getNumber = () => {
//   getTodoNumber().then((res) => {
//     numberList.value = res;
//   });
// };
const todoList_edit = () => {
  console.log(111, "todoList_edit");
};
const historicalAudit = () => {
  console.log("审核页面", 1111);
};
onMounted(() => {
  //   getNumber();
});
const current = ref(1);
const description = "您上传的文件配置有误，无法正常运营，请修改上传正确无误的资源...";
const doAction = (type) => {
  if (type === "add") {
    console.log(111, "ADD");
  }
};
</script>

<style scoped>
@import "./index.less";
</style>
